Toolbox - Web With Irfan

CSS Clamp Calculator

Your clamp() function will appear here

Root Font Size: 100% (16px) 62.5% (10px)

Min Device Width

px

Max Device Width

px

Minimum Font Size

rem

Maximum Font Size

rem

Lorem Ipsum Generator

Paragraphs

Sentences per Paragraph

Words per sentence:

Color Picker

color: #000000;

color: rgb(0,0,0);

color: hsl(0, 0%, 0%);

Font Checker

Hover over any text on the page and click to analyze its font properties.

Click "Pick Font from Page" to start...

Box Shadow Generator

Presets

Preview

box-shadow: none;

Horizontal Offset (px)

Vertical Offset (px)

Blur Radius (px)

Spread Radius (px)

Shadow Color

Inset

Box Properties

Canvas Color

Background Color

Border Color

Border Radius (px)

Height (px)

Width (px)

Gradient Generator

Presets

Preview

background-image: linear-gradient(to right, #000000, #ffffff);

Type

Direction

Color Stops

0%

100%

Text Case Converter 📝

Characters: 0 | Words: 0

Unit Converter

0px = 0rem

Base Font Size

px

Value

⟶

Convert To

Common Conversions

CSS Clamp Presets

All values are calculated with root font-size: 10px (62.5%)

:root {
  font-size: 10px;
  --font-h1: clamp(4rem, 3.733rem + 0.333vw, 4.8rem);
  --font-h2: clamp(3.5rem, 3.267rem + 0.233vw, 4rem);
  --font-h3: clamp(2.8rem, 2.667rem + 0.133vw, 3.2rem);
  --font-h4: clamp(2.2rem, 2.133rem + 0.067vw, 2.5rem);
  --font-h5: clamp(1.8rem, 1.733rem + 0.067vw, 2rem);
  --font-h6: clamp(1.5rem, 1.467rem + 0.033vw, 1.6rem);
  --font-subheading: clamp(2rem, 0.521vw + 1.833rem, 2.5rem);
  --text: clamp(1.4rem, 1.367rem + 0.033vw, 1.6rem);
  --small-text: clamp(1.2rem, 1.167rem + 0.033vw, 1.4rem);
  --text-button: clamp(1.3rem, 1.25rem + 0.025vw, 1.5rem);
}

Edit Min & Max Values:

h1

Min Size (rem): Max Size (rem):

h2

Min Size (rem): Max Size (rem):

h3

Min Size (rem): Max Size (rem):

h4

Min Size (rem): Max Size (rem):

h5

Min Size (rem): Max Size (rem):

h6

Min Size (rem): Max Size (rem):

Subheading

Min Size (rem): Max Size (rem):

Text

Min Size (rem): Max Size (rem):

Small Text

Min Size (rem): Max Size (rem):

Button Text

Min Size (rem): Max Size (rem):

Business Info Generator

Contact Information

Phone Number

Email Address

Address & Map Info

Business Address

Google Maps Embed Code

Google Maps Link

Social Media Links

Facebook

Instagram

LinkedIn

Twitter

YouTube

TikTok

⏰ Business Hours

Click "Generate Code" to create your business information code

Color Contrast Checker

Foreground Color

Background Color

Aa

Contrast Ratio: 21:1

WCAG Compliance: AAA

Large Text Compliance: AAA

UI Components Compliance: AA

Normal Text Large Text

Accent Color Shortcode Generator

Generate a PHP shortcode that uses your theme's accent color variable.

Shortcode Name:

CSS Variable/Color Code:

Usage Example:

This is an[ac]Accent Color Example.[/ac]